<template>
    <div class="app" :style="state.style">
        <pHeaderVue></pHeaderVue>
        <pContentVue></pContentVue>
    </div>
</template>
<script setup>
import { onMounted, onBeforeUnmount, reactive } from "vue"
import pHeaderVue from "./components/pHeader.vue";
import pContentVue from "./components/pContent.vue";
const state = reactive({
    style: ''
})
const setScale = () => {
    const parent = document.querySelector('#app');
    const { offsetWidth, offsetHeight } = parent;
    const width = 1920, height = 1080;
    state.style = `transform: scaleX(${offsetWidth / width}) scaleY(${offsetHeight / height})`
}
onMounted(() => {
    // setScale();
    setTimeout(() => {
        setScale();
    }, 100);
    window.addEventListener('resize', setScale);
});
onBeforeUnmount(() => {
    window.removeEventListener('resize', setScale);
});
</script>

<style scoped lang="scss">
.app {
    width: 1920px;
    height: 1080px;
    transform-origin: top left;
    background: rgba(12, 32, 39, 1);
    transition: all .3s;
    user-select: none;
}
</style>
